<template>
  <!-- 触发器页面 -->
  <div>
    <div class="main-tabs border_tb" style="position: relative">
      <el-form
        ref="form"
        :model="triggerForm"
        :rules="triggerFormRules"
        :label-position="lablePosition"
        label-width="50px"
        size="mini"
        style="margin-top: 5px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="triggerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="触发条件" prop="triggerType">
          <div class="sele_inp_box">
            <el-form-item>
              <el-select
                v-model="triggerForm.triggerType"
                @change="selectChange()"
              >
                <el-option label="start" value="1"></el-option>
                <el-option label="计时表达式" value="2"></el-option>
                <el-option label="every" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="triggerMsg"
              style="width: 100%; margin-left: 4px"
            >
              <el-input
                style="width: 100%"
                v-model="triggerForm.triggerMsg"
                v-if="input_show"
              ></el-input>
            </el-form-item>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部操作按钮 -->
    <foot-operation-button
      @submit="submit"
      @handClose="handClose"
      style="margin-right: 30px"
    />
  </div>
</template>

<script>
import FootOperationButton from "../CommonComponents/FootOperationButton";
import { cronValidate } from "@/utils/cronValidate";
export default {
  components: {
    FootOperationButton,
  },
  props: {
    nodeDataRight: {
      type: Object,
      default: () => {},
    },
    keyNumber: { type: Number },
  },
  data() {
    return {
      triggerList_obj: {},
      lablePosition: "top",
      input_show: false,
      triggerForm: {
        name: "",
        triggerType: "1",
        triggerTypeVal: "at",
        triggerMsg: "start",
      },
      triggerFormRules: {
        triggerType: [{ required: true }],
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { pattern: /^[A-Za-z]/, message: "名称必须以字母开头" },
        ],
        triggerMsg: [
          { required: true, message: "触发条件不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    nodeDataRight: {
      handler: function (newData, oldData) {
        console.info("trigger 已打开 watch 观察者--------", newData);
        if ("" !== newData && newData != undefined) {
          const { name, criteria, criteriaType } = newData;
          if (name != undefined) {
            this.triggerForm.name = name;
          }
          if (criteria != undefined && criteriaType != undefined) {
            if (criteria == "start" && criteriaType == "at") {
              this.triggerForm.triggerType = "1";
              this.triggerForm.triggerMsg = criteria;
              this.input_show = false;
            } else if (criteria != "start" && criteriaType == "at") {
              this.triggerForm.triggerType = "2";
              this.triggerForm.triggerMsg = criteria;
              this.input_show = true;
            } else if (criteriaType == "every") {
              this.triggerForm.triggerType = "3";
              this.triggerForm.triggerMsg = criteria.replace("every", "");
              this.input_show = true;
            } else {
              this.triggerForm.triggerType = "3";
              this.triggerForm.triggerMsg = criteria.replace("every", "");
              this.input_show = true;
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
    keyNumber: {
      handler: function (newData, oldData) {},
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    selectChange() {
      //切换选项有默认值
      if (this.triggerForm.triggerType == "1") {
        //"criteria": "start", "criteriaType": "at",
        this.input_show = false;
        this.triggerForm.triggerMsg = "start";
        this.triggerForm.triggerTypeVal = "at";
      } else if (this.triggerForm.triggerType == "2") {
        // "criteria": "0 0 * * * ?", "criteriaType": "at",
        this.triggerForm.triggerMsg = "0 15 10 ? * MON-FRI";
        this.triggerForm.triggerTypeVal = "at";
        this.input_show = true;
      } else if (this.triggerForm.triggerType == "3") {
        // "criteria": "every 5 min", "criteriaType": "every",
        this.triggerForm.triggerMsg = "5 min";
        this.triggerForm.triggerTypeVal = "every";
        this.input_show = true;
      }
    },
    submit() {
      this.triggerList_obj.name = this.triggerForm.name;
      if (this.triggerForm.triggerType == "1") {
        this.triggerList_obj.criteria = this.triggerForm.triggerMsg;
        this.triggerList_obj.criteriaType = this.triggerForm.triggerTypeVal;
      }
      if (this.triggerForm.triggerType == "2") {
        this.triggerList_obj.criteria = this.triggerForm.triggerMsg;
        this.triggerList_obj.criteriaType = this.triggerForm.triggerTypeVal;

        //验证
        // if(cronValidate(this.triggerList_obj.criteria)==false){
        //   this.$msg({ type: "warning", message: "非法的表达式!" });
        //   return;
        // }

        let regEx =
          "^\\s*($|#|\\w+\\s*=|(\\?|\\*|(?:[0-5]?\\d)(?:(?:-|\\/|\\,)(?:[0-5]?\\d))?(?:,(?:[0-5]?\\d)(?:(?:-|\\/|\\,)(?:[0-5]?\\d))?)*)\\s+(\\?|\\*|(?:[0-5]?\\d)(?:(?:-|\\/|\\,)(?:[0-5]?\\d))?(?:,(?:[0-5]?\\d)(?:(?:-|\\/|\\,)(?:[0-5]?\\d))?)*)\\s+(\\?|\\*|(?:[01]?\\d|2[0-3])(?:(?:-|\\/|\\,)(?:[01]?\\d|2[0-3]))?(?:,(?:[01]?\\d|2[0-3])(?:(?:-|\\/|\\,)(?:[01]?\\d|2[0-3]))?)*)\\s+(\\?|\\*|(?:0?[1-9]|[12]\\d|3[01])(?:(?:-|\\/|\\,)(?:0?[1-9]|[12]\\d|3[01]))?(?:,(?:0?[1-9]|[12]\\d|3[01])(?:(?:-|\\/|\\,)(?:0?[1-9]|[12]\\d|3[01]))?)*)\\s+(\\?|\\*|(?:[1-9]|1[012])(?:(?:-|\\/|\\,)(?:[1-9]|1[012]))?(?:L|W)?(?:,(?:[1-9]|1[012])(?:(?:-|\\/|\\,)(?:[1-9]|1[012]))?(?:L|W)?)*|\\?|\\*|(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)(?:(?:-)(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC))?(?:,(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)(?:(?:-)(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC))?)*)\\s+(\\?|\\*|(?:[0-6])(?:(?:-|\\/|\\,|#)(?:[0-6]))?(?:L)?(?:,(?:[0-6])(?:(?:-|\\/|\\,|#)(?:[0-6]))?(?:L)?)*|\\?|\\*|(?:MON|TUE|WED|THU|FRI|SAT|SUN)(?:(?:-)(?:MON|TUE|WED|THU|FRI|SAT|SUN))?(?:,(?:MON|TUE|WED|THU|FRI|SAT|SUN)(?:(?:-)(?:MON|TUE|WED|THU|FRI|SAT|SUN))?)*)(|\\s)+(\\?|\\*|(?:|\\d{4})(?:(?:-|\\/|\\,)(?:|\\d{4}))?(?:,(?:|\\d{4})(?:(?:-|\\/|\\,)(?:|\\d{4}))?)*))$";
        var matches_array = this.triggerList_obj.criteria.match(regEx);
        if (matches_array == null) {
          this.$msg({ type: "warning", message: "非法的表达式!" });
          return;
        }
      }
      if (this.triggerForm.triggerType == "3") {
        this.triggerList_obj.criteriaType = this.triggerForm.triggerTypeVal;

        //验证
        var reg = /\d/;
        let validflag = this.triggerForm.triggerMsg;

        if (!reg.test(validflag)) {
          this.$msg({ type: "warning", message: "请输入正确的时间数值!" });
          return;
        }
        if (
          validflag.indexOf("min") == -1 &&
          validflag.indexOf("sec") == -1 &&
          validflag.indexOf("second") == -1 &&
          validflag.indexOf("minute") == -1 &&
          validflag.indexOf("hour") == -1
        ) {
          this.$msg({ type: "warning", message: "请输入正确的时间数值!" });
          return;
        }
        this.triggerList_obj.criteria = "every " + this.triggerForm.triggerMsg;
      }

      this.triggerList_obj.annotationList = [];
      let returnData = {
        display: false,
        type: "triggerList",
        objectState: this.nodeDataRight.objectState,
        nodeData: this.triggerList_obj,
        nodeDataRight: this.nodeDataRight,
      };
      this.$emit("returnSource", returnData);
    },
    //关闭-取消
    handClose() {
      this.$emit("handClose");
    },
  },
};
</script>
<style scoped>
.border_tb {
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
.sele_inp_box {
  display: flex;
  align-items: center;
  width: 100%;
}
.main-tabs {
  padding: 0 30px;
  height: calc(100vh - 140px);
}
.main-tabs /deep/.el-form-item__label {
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
}

.main-tabs /deep/ .el-pagination .el-select .el-input .el-input__inner {
  border: none;
}
</style>
